<!DOCTYPE html>
<html lang="en" xmlns:pseudo="http://java.sun.com/xml/ns/javaee">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title>云渲染监控平台</title>

    <meta name="description" content="3 styles with inline editable feature" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/font-awesome.min.css" />


    <!-- page specific plugin styles -->

    <!-- text fonts -->
    <link rel="stylesheet" href="css/ace-fonts.css" />

    <!-- ace styles -->
    <link rel="stylesheet" href="css/ace.min.css" id="main-ace-style" />

    <link rel="stylesheet" href="css/previewStyle.css" />

    <!--myStyle-->
    <link rel="stylesheet" href="css/myStyle.css" type="text/css" />

    <!-- inline styles related to this page -->
    <script src="js/angular.min.js"></script>

    <!--css style-->
    <!--<style>-->
    <!--.sky {-->
    <!--background-color:green-->
    <!--}-->
    <!--.tomato {-->
    <!--background-color:yellow-->
    <!--}-->
   <!--</style>-->
</head>

<body class="no-skin">


<div id="mask"></div>
<i id="loading" class="ace-icon fa fa-spinner fa-spin orange bigger-250 "></i>

<div id="dialog-message" class="hide">
    <p>
        Dialog information.
    </p>
    <div class="hr hr-12 hr-double"></div>
    <p>
        <b></b>.
    </p>
</div><!-- #dialog-message -->


<!-- #section:basics/navbar.layout -->
<div id="navbar" class="navbar navbar-default">
    <script type="text/javascript">
        try{ace.settings.check('navbar' , 'fixed')}catch(e){}
    </script>

    <div class="navbar-container" id="navbar-container">
        <!-- #section:basics/sidebar.mobile.toggle -->
        <button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler">
            <span class="sr-only">Toggle sidebar</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>
        </button>

        <!-- /section:basics/sidebar.mobile.toggle -->
        <div class="navbar-header pull-left">
            <!-- #section:basics/navbar.layout.brand -->
            <a href="#" class="navbar-brand">
                <small>
                    <i class="fa fa-tachometer"></i>
                    云渲染监控平台
                </small>
            </a>
        </div>
        <div ng-include="'html/navigation.html'"></div>

        <!-- /section:basics/navbar.dropdown -->
    </div><!-- /.navbar-container -->
</div>

<!-- /section:basics/navbar.layout -->
<div class="main-container" id="main-container">
    <script type="text/javascript">
        try{ace.settings.check('main-container' , 'fixed')}catch(e){}
    </script>

    <!-- /section:basics/sidebar -->
    <div class="main-content">
        <!-- /section:basics/content.breadcrumbs -->
        <div class="page-content">

            <!-- /section:settings.box -->
            <div class="page-content-area">

                <div class="row">
                    <div class="col-xs-12">
                        <div class="tabbable">
                            <ul class="nav nav-tabs padding-10">
                                <li class="active">
                                    <a data-toggle="tab" href="#home" id="monitoring">
                                        <i class="green ace-icon fa fa-tachometer bigger-120"></i>
                                        进度监控
                                    </a>
                                </li>

                                <li>
                                    <a data-toggle="tab" href="#friends" id="preview">
                                        <i class="blue ace-icon fa fa-globe bigger-120"></i>
                                        完成渲染
                                    </a>
                                </li>

                                <li>
                                    <a data-toggle="tab" href="#feed" id="upload">
                                        <i class="orange ace-icon fa fa-cloud-upload bigger-120"></i>
                                        文件上传
                                    </a>
                                </li>

                                <li>
                                    <a data-toggle="tab" href="#pictures" id="about">
                                        <i class="pink ace-icon fa fa-book bigger-120"></i>
                                        关于
                                    </a>
                                </li>
                            </ul>

                            <div class="tab-content no-border padding-24"  ng-app="progressApp" ng-controller="progressCtrls">
                                <div id="home" class="tab-pane in active">
                                    <div class="row">
                                        <div class="col-xs-12">
                                            <div class="table-header">
                                                <i class="ace-icon fa fa-tachometer bigger-120 hidden-480"></i>
                                                渲染进度监控
                                            </div>

                                            <!-- <div class="table-responsive"> -->
                                            <!-- <div class="dataTables_borderWrap"> -->

                                            <table id="sample-table-2" class="table table-striped table-bordered table-hover">
                                                <thead>
                                                <tr>
                                                    <th width="100px">ID</th>
                                                    <th width="100px">场景</th>
                                                    <td width="600px" >
                                                        <div class="progress">
                                                            <div class="progress-bar" ng-repeat="progressSteps in progressControl[0].progressStepsList" style="width: 14.28%;" >
                                                                {{progressSteps.stepName}}
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <th width="100px">下载</th>
                                                    <th width="100px">预览</th>
                                                    <th width="100px"></th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr  ng-repeat="progressControlc in progressControl" id="mainLoop" style="height: 40px;">
                                                    <td>{{progressControlc.id}}</td>
                                                    <td>{{progressControlc.girard}}</td>
                                                    <td>
                                                        <div class="progress">
                                                            <div class="progress-bar" ng-repeat="progressSteps in progressControlc.progressStepsList" ng-class="{true:'done',false:'processing'}[{{progressSteps.allFiles&lt;=progressSteps.completedFiles}}]" style="width: {{progressSteps.ratio}}%;"  ng-if="progressSteps.ratio>0">
                                                                {{progressSteps.ratio}}
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td><a href="/downloadzip?MODEL={{progressControlc.girard}}">下载</a></td>
                                                    <td >
                                                        <!--<a href="/preview?partCode={{progressControlc.girard}}" target="_blank">预览</a>-->
                                                        <a ng-repeat="imageType in progressControlc.imageTypes" href="/preview?partCode={{progressControlc.girard}}&amp;imageType={{imageType}}" target="_blank">
                                                            {{imageType}}
                                                        </a>
                                                    </td>
                                                    <td>
                                                        <a class="red" href="#" ng-click="deleteComplete(this)">
                                                            <i class="ace-icon fa fa-trash-o bigger-130">
                                                                <pseudo:before></pseudo:before>
                                                            </i>
                                                        </a>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>

                                    <div id="modal-table" class="modal fade" tabindex="-1">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header no-padding">
                                                    <div class="table-header">
                                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                            <span class="white">&times;</span>
                                                        </button>
                                                        进度监控
                                                    </div>
                                                </div>

                                                <div class="modal-footer no-margin-top">
                                                    <button class="btn btn-sm btn-danger pull-left" data-dismiss="modal">
                                                        <i class="ace-icon fa fa-times"></i>
                                                        Close
                                                    </button>

                                                    <ul class="pagination pull-right no-margin">
                                                        <li class="prev disabled">
                                                            <a href="#">
                                                                <i class="ace-icon fa fa-angle-double-left"></i>
                                                            </a>
                                                        </li>

                                                        <li class="active">
                                                            <a href="#">1</a>
                                                        </li>

                                                        <li>
                                                            <a href="#">2</a>
                                                        </li>

                                                        <li>
                                                            <a href="#">3</a>
                                                        </li>

                                                        <li class="next">
                                                            <a href="#">
                                                                <i class="ace-icon fa fa-angle-double-right"></i>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div><!-- /.modal-content -->
                                        </div><!-- /.modal-dialog -->
                                    </div><!-- PAGE CONTENT ENDS -->
                                </div><!-- /#home -->

                                <div id="feed" class="tab-pane">
                                    <div class="row" >
                                        <div class="col-xs-12">
                                            <div class="table-header">
                                                <i class="ace-icon fa fa-cloud-upload bigger-120 hidden-480"></i>
                                                文件上传
                                            </div>
                                        </div>
                                    </div>
                                    <form method="POST" enctype="multipart/form-data" id="saveFileToServer">
                                        <div class="row">
                                            <div class="col-xs-4"></div>
                                            <div class="col-xs-4">
                                                <div class="form-group">
                                                    <div class="space-4"></div>
                                                    <div class="row">
                                                        <div class="col-xs-12">
                                                            <label>渲染模型：</label>
                                                            <input type="text" placeholder="请输入模型编码&hellip;" id="filename" name="filename" />
                                                        </div>
                                                    </div>
                                                    <div class="space-4"></div>
                                                    <div class="row">
                                                        <div class="col-xs-12">
                                                            <!-- #section:custom/file-input -->
                                                            <input type="file" id="id-input-file-1" name="file" onchange="fileSelected_test()"/>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-xs-12">
                                                            <div class="progress" id="progressbar" style="display:none">
                                                                <div class="progress" id="progressNumber" data-percent="0%">
                                                                    <div class="progress-bar" id="progressNumber1" style="width:0%;"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-xs-12">
                                                            <!-- #section:custom/file-input -->
                                                            <input type="file" id="id-input-file-2" name="file1"/>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-xs-12">
                                                            <!-- #section:custom/file-input -->
                                                            <input type="file" id="id-input-file-3" name="file2"/>
                                                        </div>
                                                    </div>
                                                    <div class="space-4"></div>
                                                    <div class="row">
                                                        <div class="col-xs-12 center">
                                                            <button class="btn btn-info" type="button" onclick="submitFileName()">
                                                                <i class="ace-icon fa fa-check bigger-110"></i>
                                                                上传
                                                            </button>
                                                            &nbsp; &nbsp; &nbsp;
                                                            <button class="btn" type="reset" onclick="Reset()">
                                                                <i class="ace-icon fa fa-undo bigger-110"></i>
                                                                重置
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div><!-- /#feed -->

                                <div id="friends" class="tab-pane">

                                    <div class="row">
                                        <div class="col-xs-12">
                                            <div class="table-header">
                                                <i class="ace-icon fa fa-globe bigger-120 hidden-480"></i>
                                                已完成渲染列表
                                            </div>

                                            <!-- <div class="table-responsive"> -->
                                            <!-- <div class="dataTables_borderWrap"> -->

                                            <table id="sample-table-3" class="table table-striped table-bordered table-hover">
                                                <thead>
                                                <tr>
                                                    <th width="100px">ID</th>
                                                    <th width="100px">款号</th>
                                                    <td width="100px" >进度</td>
                                                    <th width="100px">下载</th>
                                                    <th width="100px">预览</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr  ng-repeat="completeProgress in completeProgresses" id="mainLoop2" style="height: 40px;">
                                                    <td>{{completeProgress.id}}</td>
                                                    <td>{{completeProgress.girard}}</td>
                                                    <td>{{completeProgress.progress}}</td>
                                                    <td><a href="/downloadzip?MODEL={{completeProgress.girard}}" target="_blank">下载</a></td>
                                                    <td >
                                                        <a ng-repeat="imageType in completeProgress.imageTypes" href="/preview?partCode={{completeProgress.girard}}&amp;imageType={{imageType}}" target="_blank">
                                                            {{imageType}}
                                                        </a>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>

                                    <div id="modal-table2" class="modal fade" tabindex="-1">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header no-padding">
                                                    <div class="table-header">
                                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                            <span class="white">&times;</span>
                                                        </button>
                                                        进度监控
                                                    </div>
                                                </div>

                                                <div class="modal-footer no-margin-top">
                                                    <button class="btn btn-sm btn-danger pull-left" data-dismiss="modal">
                                                        <i class="ace-icon fa fa-times"></i>
                                                        Close
                                                    </button>

                                                    <ul class="pagination pull-right no-margin">
                                                        <li class="prev disabled">
                                                            <a href="#">
                                                                <i class="ace-icon fa fa-angle-double-left"></i>
                                                            </a>
                                                        </li>

                                                        <li class="active">
                                                            <a href="#">1</a>
                                                        </li>

                                                        <li>
                                                            <a href="#">2</a>
                                                        </li>

                                                        <li>
                                                            <a href="#">3</a>
                                                        </li>

                                                        <li class="next">
                                                            <a href="#">
                                                                <i class="ace-icon fa fa-angle-double-right"></i>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div><!-- /.modal-content -->
                                        </div><!-- /.modal-dialog -->
                                    </div><!-- PAGE CONTENT ENDS -->

                                </div><!-- /#friends -->

                                <div id="pictures" class="tab-pane">
                                    <div class="row" >
                                        <div class="col-xs-12">
                                            <div class="table-header">
                                                <i class="ace-icon fa fa-book bigger-120 hidden-480"></i>
                                                关于云渲染监控平台
                                            </div>
                                        </div>
                                    </div>
                                </div><!-- /#pictures -->
                            </div>
                        </div>
                        <!-- PAGE CONTENT ENDS -->
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.page-content-area -->
        </div><!-- /.page-content -->
    </div><!-- /.main-content -->

    <div class="footer">
        <div class="footer-inner">
            <!-- #section:basics/footer -->
            <div class="footer-content">
						<span class="bigger-120">
							<span class="blue bolder">QiShon</span>
							Application &copy; 2015-2017
						</span>

                &nbsp; &nbsp;
                <span class="action-buttons">
							<a href="#">
								<i class="ace-icon fa fa-twitter-square light-blue bigger-150"></i>
							</a>

							<a href="#">
								<i class="ace-icon fa fa-facebook-square text-primary bigger-150"></i>
							</a>

							<a href="#">
								<i class="ace-icon fa fa-rss-square orange bigger-150"></i>
							</a>
						</span>
            </div>

            <!-- /section:basics/footer -->
        </div>
    </div>

    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
        <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
    </a>
</div><!-- /.main-container -->

<!-- basic scripts -->
<!--<script type="text/javascript">-->
    <!--if('ontouchstart' in document.documentElement) document.write("<script src='js/jquery.mobile.custom.min.js'>"+"<"+"/script>");-->
<!--</script>-->

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-ui.min.js"></script>

<!-- page specific plugin scripts -->
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/jquery.dataTables.bootstrap.js"></script>

<!-- ace scripts -->
<script src="js/ace-elements.min.js"></script>
<script src="js/ace.min.js"></script>
<script src="js/progressApp.js"></script>
<script src="js/progressCtrl.js"></script>
<script src="js/elements.fileinput.js"></script>
<!-- inline scripts related to this page -->

</body>
</html>
